<template>
  <div>
    <el-tree
      ref="treeRef"
      :data="data.list"
      show-checkbox
      node-key="id"
      :check-strictly="true"
      :default-expanded-keys="[2, 3]"
      :default-checked-keys="data.authority"
      :props="{ children: 'roleList', label: 'name' }"
    />
    <el-button type="primary" @click="changeAuthority">确认修改</el-button>
  </div>
</template>

<script setup lang="ts">
import { useRoute } from "vue-router";
import { InitData } from "@/type/authority";
import { onMounted, reactive, ref } from "vue";
import Api from "@/request/api";

const route = useRoute();

onMounted(() => {
  getAuthority();
});
const params: any = route.params;

const data = reactive(new InitData(params.id, params.authority));
const treeRef = ref();
const getAuthority = () => {
  Api.getAuthorityList().then((res: any) => {
    data.list = res.data.list;
  });
};

const changeAuthority = () => {
  console.log(
    treeRef.value.getCheckedKeys().sort(function (a: number, b: number) {
      return a - b;
    })
  );
  // 调接口传给后台
  // ...
};
// watch(
//   () => route,
//   (val: any) => {
//     console.log(val);
//   },
//   { deep: true, immediate: true }
// );

console.log(route);
</script>

<style scoped></style>
